<template>
  <view class="theme-item">
    <template v-if="props.more !== true">
      <navigator
        :url="detailUrl"
        open-type="navigate"
        hover-class="navigator-hover"
        class="w-full h-full"
      >
        <image mode="aspectFill" class="item-image" :src="props.data?.picurl" />
        <view class="mask">{{ props.data?.name || "美女" }}</view>

        <view class="tag">{{ updateTime }}更新</view>
      </navigator>
    </template>
    <template v-else>
      <navigator
        url="/pages/classify/classify"
        open-type="switchTab"
        hover-class="navigator-hover"
        class="w-full h-full"
      >
        <image
          mode="aspectFill"
          class="item-image"
          src="../../common/images/more.jpg"
        ></image>
        <view class="moreMask">...更多</view>
      </navigator>
    </template>
  </view>
</template>

<script setup lang="ts">
import { computed, defineProps } from "vue";
import { ThemeItem } from "../../types";

const props = defineProps<{
  data?: ThemeItem;
  more?: boolean;
}>();

const detailUrl = computed(() => {
  return `/pages/classlist/classlist?id=${props.data?._id}&title=${props.data?.name}`;
});

const updateTime = computed(() => {
  let result = "";

  if (props.data?.updateTime) {
    const date = new Date(props.data.updateTime).valueOf();
    const now = new Date().valueOf();
    const diff = now - date;
    if (diff < 1000 * 60 * 60 * 24) {
      result = `${Math.floor(diff / (1000 * 60 * 60))}小时前`;
    } else if (diff < 1000 * 60 * 60 * 24 * 7) {
      result = `${Math.floor(diff / (1000 * 60 * 60 * 24))}天前`;
    } else if (diff < 1000 * 60 * 60 * 24 * 7 * 4) {
      result = `${Math.floor(diff / (1000 * 60 * 60 * 24 * 7))}周前`;
    } else {
      result = `${Math.floor(diff / (1000 * 60 * 60 * 24 * 30))}个月前`;
    }
  }
  return result;
});
</script>

<style lang="scss" scoped>
.theme-item {
  height: 340rpx;
  width: calc((100vw - 60rpx) / 3);
  border-radius: 8rpx;
  margin-bottom: 15rpx;
  overflow: hidden;
  position: relative;

  .item-image {
    width: 100%;
    height: 100%;
  }

  .tag {
    height: 30rpx;
    width: 130rpx;
    border-radius: 0 0 8rpx 0;
    background-color: rgba(250, 129, 90, 0.8);
    font-size: 16rpx;
    color: #fff;
    line-height: 30rpx;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
  }

  .moreMask {
    backdrop-filter: blur(20rpx);
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 30rpx;
    color: #fff;
    top: 0;
    right: -5rpx;
    left: 0;
    bottom: 0;
  }

  .mask {
    width: 100%;
    height: 68rpx;
    backdrop-filter: blur(20rpx);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 68rpx;
    text-align: center;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-weight: bold;
  }
}
</style>
